<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>CSS3大白-Demo展示，桃子同学的个人空间</title>
    <link rel="stylesheet" href="/public/styles/base.css">
    <style>
        .bg{width:500px;height:700px;background:#67b168;margin:30px auto 0;position:relative;border:1px solid #fff;}
        .head{width:115px;height:80px;background:#FFFFFF; border-radius:50%; left:193px; position:absolute; top:36px;z-index:3; box-shadow:0 -4px 13px rgba(0, 0, 0, 0.2) inset; }
        .eye-line{ border-radius:43%; box-shadow:0 1px 0 #000; height:5px; left:30px; position:absolute; top:38px; width:52px; }
        .eye-left{ background:#000000; border-radius:50%; height:15px; left:26px; position:absolute; top:34px; width:15px;animation:eye 2s linear infinite;-webkit-animation:eye 5s linear infinite;}
        .eye-right{ background:#000000; border-radius:50%; height:15px; left:74px; position:absolute; top:34px; width:15px;animation:eye 2s linear infinite;-webkit-animation:eye 5s linear infinite; }
        @keyframes eye{0%{transform:scaleY(1)}5%{transform:scaleY(0)}10%{transform:scaleY(1)}}
        @-webkit-keyframes eye{0%{transform:scaleY(1)}5%{transform:scaleY(0)}10%{transform:scaleY(1)}}
        .body-top{ background:#ffffff;border-radius:50% 50% 0 0; height:190PX; left:138px; position:absolute; top:103px; width:225px; z-index:2; }
        .body-left{ background:#ffffff; border-radius:47px; height:211px; left:130px; position:absolute; top:149px; transform:rotate(10deg); width:149px; z-index:3; box-shadow:-3px 8px 6px rgba(0, 0, 0, 0.2); }
        .body-right{ background:#ffffff; border-radius:47px; height:211px; left:223px; position:absolute; top:149px; transform:rotate(-10deg); width:149px; z-index:2; box-shadow:3px 8px 6px rgba(0, 0, 0, 0.2); }
        .body-right p{border: 1px solid #ddd;border-radius: 25px;height: 40px;left: 82px;position: absolute;top: 32px;transform: rotate(10deg);width: 40px;}
        .body-right p .line{background: #ddd none repeat scroll 0 0;height: 1px;left: 2px;position: absolute;top: 21px;width: 11px;}
        .body-right p .curve{height: 6px;left: 11px;overflow: hidden;position: absolute;top: 20px;transform: rotate(-11deg);width: 17px;}
        .body-right p .curve:after{border: 1px solid #ddd;border-radius: 100%;content: "";display: inline-block;height: 12px;position: absolute;top: -8px;width: 19px;}
        .body-right p span:nth-of-type(3){left:27px;}
        .body-bottom{ background:#ffffff; border-radius:45% 45% 50% 50%; height:232px; left:117px; position:absolute; top:226px; width:267px; z-index:3; box-shadow:0 9px 9px rgba(0, 0, 0, 0.2); }
        .hand-right .hand-right-one{ background:#ffffff; border-radius:50%; height:184px; left:79px; position:absolute; top:133px; transform:rotate(30deg); width:106px; }
        .hand-right .hand-right-two{background:#ffffff; border-radius:50%; height:230px; left:55px; position:absolute; top:198px; transform:rotate(3deg); width:106px;}
        .hand-right .hand-finger .hand-finger-one{ background:#ffffff; border-radius:50%; height:107px; left:72px; position:absolute; top:356px; transform:rotate(-26deg); width:36px; }
        .hand-right .hand-finger .hand-finger-two{background:#ffffff; border-radius:50%; height:89px; left:99px; position:absolute; top:350px; transform:rotate(-26deg); width:30px;}
        .hand-left .hand-left-one{ background:#ffffff; border-radius:50%; height:184px; left:303px; position:absolute; top:131px; transform:rotate(-30deg); width:106px; }
        .hand-left .hand-left-two{background:#ffffff; border-radius:50%; height:230px; left:329px; position:absolute; top:198px; transform:rotate(-3deg); width:106px;}
        .hand-left .hand-finger .hand-finger-one{ background:#ffffff; border-radius:50%; height:107px; left:382px; position:absolute; top:356px; transform:rotate(26deg); width:36px; }
        .hand-left .hand-finger .hand-finger-two{background:#ffffff; border-radius:50%; height:89px; left:364px; position:absolute; top:352px; transform:rotate(26deg); width:30px;}
        .foot-left{ background:#ffffff; border-radius:0 0 10% 50%; height:150px; left:145px; position:absolute; top:413px; width:102px; box-shadow:-1px 0 8px rgba(0, 0, 0, 0.2) inset; }
        .foot-right{ background:#ffffff; border-radius:0 0 50% 10%; height:150px; left:247px; position:absolute; top:413px; width:102px; box-shadow:-1px 0 8px rgba(0, 0, 0, 0.2) inset; }
    </style>
</head>
<body>
<div class="bg">
    <div class="head">
        <div class="eye-line"></div>
        <div class="eye-left"></div>
        <div class="eye-right"></div>
    </div>
    <div class="body">
        <div class="body-top"></div>
        <div class="body-left"></div>
        <div class="body-right">
            <p>
                <span class="line"></span>
                <span class="curve"></span>
                <span class="line"></span>
            </p>
        </div>
        <div class="body-bottom"></div>
    </div>
    <div class="hand-right">
        <div class="hand-right-one"></div>
        <div class="hand-right-two"></div>
        <div class="hand-finger">
            <div class="hand-finger-one"></div>
            <div class="hand-finger-two"></div>
        </div>
    </div>
    <div class="hand-left">
        <div class="hand-left-one"></div>
        <div class="hand-left-two"></div>
        <div class="hand-finger">
            <div class="hand-finger-one"></div>
            <div class="hand-finger-two"></div>
        </div>
    </div>
    <div class="foot-left"></div>
    <div class="foot-right"></div>
</div>
</body>
</html>